<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<view class="title-view flex center">
			<text class="pay-title">订单应付金额</text>
			<text class="pay-price">￥{{totlePrice}}</text>
		</view>
		<view class="content-view flex">
			<view class="item-view flex row aCenter" @click="setType(1)">
				<image class="item-icon" src="../../static/yue.png" mode="aspectFit"></image>
				<text class="item-text">余额 ({{userInfo ? userInfo.money : '0'}})</text>
				<image v-if="type == 1" class="radio-icon" src="../../static/radio_s.png"></image>
				<image v-if="type != 1" class="radio-icon" src="../../static/radio_n.png"></image>
			</view>
			<view class="item-yue flex row aCenter">
				<input class="input-price" v-model="price" placeholder="请输入使用额度" type="digit" @input="onInput"/>
				<text class="all-text" @click="allYue">全部使用</text>
			</view>
			<view class="item-view item-border-top item-border-bottom flex row aCenter" @click="setType(2)">
				<!-- 微信支付 ui -->
				<image v-if="userAgent == 'wechat'" class="item-icon" src="../../static/wechat.png" mode="aspectFit"></image>
				<text v-if="userAgent == 'wechat'" class="item-text">微信支付</text>
				<!-- 支付宝支付ui -->
				<image v-if="userAgent == 'alipay'" class="item-icon" src="../../static/alipay.png" mode="aspectFit"></image>
				<text v-if="userAgent == 'alipay'" class="item-text">支付宝支付</text>
				<!-- web不显示 -->
				
				<!-- radio 单选图标 -->
				<image v-if="type == 2" class="radio-icon" src="../../static/radio_s.png"></image>
				<image v-if="type != 2" class="radio-icon" src="../../static/radio_n.png"></image>
			</view>
		</view>
		<view class="bom-btn flex center" @click="onPay">立即支付</view>
	</view>
</template>

<script>
	import XUtil from '../../common/xlb-util.js';
	import wx from 'jweixin-module';

	export default {
		data() {
			return {
				orderInfo: {}, //弃用
				
				totlePrice: 0, //应付款
				orderId: 0, //订单id
				
				price: '',
				type: 0,
				
				userInfo: {},
				
				userAgent: 'wechat', //wechat alipay web
				
				onPay: ()=>{},
			}
		},
		onLoad(opt) {
			
			this.onPay = XUtil.debounce(this.pay, 256, true);
			
			if(XUtil.getUserAgent()){
				//获取当前端口是什么
				this.userAgent = XUtil.getUserAgent();
			}
			
			// if(opt.data){
				// let data = JSON.parse(opt.data);
				// this.orderInfo = data;
				this.totlePrice = opt.totlePrice;
				this.orderId = opt.orderId;
			// }
			
			this.getUserInfo();
		},
		methods: {
			setType (type) {
				this.type = type;
				if(this.type == 2){
					this.price = '';
				}
			},
			onInput (e) {
				console.log(e.detail.value);
				if(e.detail.value){
					this.type = 1;
				}
			},
			allYue () {
				//钱包余额
				let _blPrice = this.userInfo && this.userInfo.money ? this.userInfo.money : 0;
				//订单总价
				let _totlePrice = this.totlePrice;
				
				if(_blPrice && _totlePrice){
					this.price = parseFloat(_totlePrice) > parseFloat(_blPrice) ? _blPrice : _totlePrice;
				}else{
					this.price = '0.00';
				}
				this.type = 1;
			},
			getUserInfo () {
				// api/user/user_message
				let params = {
					token: uni.getStorageSync("token"),
				}
				console.log(params);
				this.$request("api/user/user_message", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							this.userInfo = data;
						}else{}
					}).catch((e) => {
						console.log(e);
					});
			},
			pay () {
				if(!this.type){ 
					uni.showToast({ title: '请选择支付方式', icon: 'none' }); 
					return ; 
				}
				if(this.type == 1 && !this.price){
					uni.showToast({ title: '请输入使用余额的金额', icon: 'none' }); 
					return ; 
				}
				
				uni.showToast({ title: "处理中...", icon: 'loading', mask: true, duration: 10000 });
				
				let params = {
					token: uni.getStorageSync("token"),
					pay_type: this.type == 1 ? 1 : ( this.userAgent == 'wechat' ? 2 : 3 ) ,  // 类型 1.余额支付 2.微信支付 3支付宝
					order_id: this.orderId,
					money: this.price, //使用余额
				}
				console.log(params);
				this.$request("api/order/orderPay", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						uni.hideToast();
						if(code == 1){
							if(data && data.is_status == 1){
								// 余额支付完成，无需微信支付
								uni.showToast({ title: '支付成功！', icon: 'none', duration: 1200 });
								setTimeout(()=>{
									uni.reLaunch({
										url: '../product-list/goods-list'
									})
								}, 1200);
							}else{
								// 使用微信支付
								uni.showToast({ title: "生成支付信息...", icon: 'loading', mask: true, duration: 3000 });
								
								let that = this;
								if(this.userAgent == 'wechat'){
									wx.config({
									    debug: false,  // 调试的bug的
									    appId: data.appId,
									    timestamp: data.timeStamp,
									    nonceStr: data.nonceStr,
									    signature: data.signature,
									    jsApiList: ['chooseWXPay'] // 功能列表，我们要使用JS-SDK的什么功能
									});
									wx.ready(function(){
										wx.chooseWXPay({
											appId: data.appId,
											timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
											nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
											package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
											signType: data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
											paySign: data.paySign, // 支付签名
											success: function (res) {
												uni.showToast({
													title: '支付成功',
													mask: true,
													success() {
														setTimeout(function() {
															uni.reLaunch({
																url: '../product-list/goods-list'
															})
														}, 1200)
													}
												})
											},
											fail: function (e) {
												uni.showToast({ title: '支付失败！', icon: 'none' })
											},
										});
									});
									wx.error(function(res){
										uni.showToast({ title: '微信支付初始化异常！', icon: 'none' })
									});
								}else if(this.userAgent == 'alipay'){
									ap.tradePay({
										orderStr: data
									}, function(res) {
										if(res.resultCode==9000){
											uni.showToast({
												title: '支付成功',
												mask: true,
												success() {
													setTimeout(function() {
														uni.reLaunch({
															url: '../product-list/goods-list'
														})
													}, 1200)
												}
											})
										}
									});
								}
							}
						}else{
							uni.showToast({ title: msg, icon: 'none' })
						}
					}).catch((e) => {
						uni.hideToast();
						console.log(e);
					});
			}
		}
	}
</script>

<style scoped>
	.box {
		background-color: #010B24;
	}
	.title-view {
		border-bottom: 11rpx solid #121C33;
	}
	.pay-title {
		font-size: 28rpx;
		color: #86898F;
		margin-top: 38rpx;
	}
	.pay-price {
		font-size: 34rpx;
		color: #FFFFFF;
		margin-top: 18rpx;
		margin-bottom: 56rpx;
	}
	.content-view {
		padding: 30rpx 50rpx;
	}
	.item-icon {
		width: 38rpx;
		height: 38rpx;
	}
	.item-text {
		flex: 1;
		font-size: 28rpx;
		color: #FFF;
		margin-left: 18rpx;
	}
	.item-view {
		padding: 36rpx 0;
	}
	.item-border-top {
		border-top: 1rpx solid #101830;
	}
	.item-border-bottom {
		border-bottom: 1rpx solid #101830;
	}
	.item-yue {
		height: 92rpx;
		background-color: #131C33;
		border-radius: 16rpx;
		padding: 0 30rpx;
	}
	.input-price {
		flex: 1;
		font-size: 28rpx;
		color: #FFF;
	}
	.all-text {
		font-size: 28rpx;
		color: #FFF;
		margin-left: 20rpx;
	}
	.radio-icon {
		width: 38rpx;
		height: 38rpx;
	}
	.bom-btn {
		width: 690rpx;
		height: 95rpx;
		background-color: #B053FF;
		border-radius: 49rpx;
		margin-left: 30rpx;
		margin-top: 500rpx;
		font-size: 28rpx;
		color: #FFF;
	}
	.bom-btn:active {
		background-color: #B053FFDD;
	}
</style>
